সিএসএস৩ মাস্কিং এমন একটি প্রযুক্তি যা ইমেজ বা HTML উপাদানের নির্দিষ্ট অংশকে দৃশ্যমান বা অদৃশ্য করতে ব্যবহার করা হয়। এটি আধুনিক ওয়েব ডিজাইনে অত্যন্ত কার্যকর, কারণ এটি কন্টেন্টকে নির্দিষ্ট আকারে কেটে (mask) বা নির্ধারিত প্যাটার্নে প্রদর্শনের সুযোগ দেয়।
মাস্কিং-এর মূল বৈশিষ্ট্য
কীভাবে মাস্কিং কাজ করে?
মাস্কিং নির্দিষ্ট পিক্সেল বা প্যাটার্ন ব্যবহার করে একটি উপাদানের দৃশ্যমানতা নিয়ন্ত্রণ করে। এটি প্রধানত মাস্ক ইমেজ (mask image) বা ক্লিপ পাথ (clip path) ব্যবহার করে সম্পন্ন করা হয়।
সিএসএস৩ মাস্কিংয়ের প্রপার্টিজ
mask-image
ব্যবহার: একটি ইমেজকে মাস্ক হিসাবে ব্যবহার করা হয়। মাস্কের সাদা অংশ দৃশ্যমান হয় এবং কালো অংশ অদৃশ্য থাকে।
div {
mask-image: url('mask.png');
-webkit-mask-image: url('mask.png'); /* পুরোনো ব্রাউজার সাপোর্ট */
}
mask-position
ব্যবহার: মাস্ক ইমেজটি কিভাবে পজিশন হবে তা নির্ধারণ করা হয়।
div {
mask-image: url('mask.png');
mask-position: center;
}
mask-repeat
ব্যবহার: মাস্ক ইমেজটি বারবার রিপিট করবে কিনা তা নির্ধারণ করা হয়।
div {
mask-image: url('mask.png');
mask-repeat: no-repeat;
}
mask-size
ব্যবহার: মাস্ক ইমেজের আকার নির্ধারণ করা হয়।
div {
mask-image: url('mask.png');
mask-size: contain;
}
clip-path
ব্যবহার: একটি উপাদানের দৃশ্যমান এলাকা নির্ধারণ করার জন্য ক্লিপ পাথ ব্যবহার করা হয়। এটি ভেক্টর পাথ অনুযায়ী কাজ করে।
div {
clip-path: circle(50% at 50% 50%); /* উপাদানকে বৃত্তাকার আকৃতি দেয় */
}
উদাহরণ: মাস্কিং ব্যবহার
মাস্ক ইমেজ ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masking Example</title>
<style>
.masked-div {
width: 300px;
height: 300px;
background: url('example.jpg') no-repeat center / cover;
mask-image: url('mask.png');
-webkit-mask-image: url('mask.png'); /* ব্রাউজার সাপোর্ট */
}
</style>
</head>
<body>
<div class="masked-div"></div>
</body>
</html>
ক্লিপ পাথ ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
.clipped-div {
width: 300px;
height: 300px;
background: url('example.jpg') no-repeat center / cover;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="clipped-div"></div>
</body>
</html>
মাস্কিং বনাম ক্লিপ পাথ
| বৈশিষ্ট্য | মাস্কিং (mask) | ক্লিপ পাথ (clip-path) |
|---|---|---|
| কাজের ধরন | পিক্সেল ভিত্তিক | ভেক্টর ভিত্তিক |
| সমর্থন | গ্রেডিয়েন্ট, ইমেজ, অথবা প্যাটার্ন | শুধুমাত্র ভেক্টর পাথ |
| ব্রাউজার সাপোর্ট | নতুন ব্রাউজার | তুলনামূলক বেশি ব্রাউজার সাপোর্ট |
ব্রাউজার সাপোর্ট
সিএসএস৩ মাস্কিং বৈশিষ্ট্যগুলো প্রধানত আধুনিক ব্রাউজারে সমর্থিত। তবে, mask প্রপার্টি ব্যবহারের ক্ষেত্রে পুরোনো ব্রাউজারের জন্য -webkit- প্রিফিক্স ব্যবহার করা প্রয়োজন।
| ফিচার | সমর্থিত ব্রাউজার |
|---|---|
mask-image | Chrome 24+, Firefox 53+, Safari 7+ |
clip-path | Chrome 55+, Firefox 53+, Edge 16+ |
মাস্কিং ব্যবহার করার সুবিধা
- জটিল আকারের উপাদান তৈরি করা সহজ।
- ইন্টারেক্টিভ এবং উন্নত ডিজাইন তৈরি করা যায়।
- অপ্রয়োজনীয় অংশ লুকিয়ে রেখে কনটেন্ট স্ট্রাকচার উন্নত করা সম্ভব।
সিএসএস৩ মাস্কিং ও ক্লিপ পাথ ব্যবহার করে ওয়েবপেজকে আরও চিত্তাকর্ষক ও ব্যবহারযোগ্য করা যায়।
Read more
